<script setup lang="ts">
import { getOptListAPI, type ArticleRowItem } from '@/apis/article'
import ArticleItem from '@/components/ArticleItem.vue'
import { ref } from 'vue'

// 收藏列表数据
const list = ref<ArticleRowItem[]>([])
// 当前页码
const current = ref(1)
// 是否正在加载
const isLoading = ref(false)
// 是否加载完成
const isFinished = ref(false)

/**
 * 获取收藏列表数据
 */
const getCollectList = async () => {
  try {
    isLoading.value = true
    // 调用API获取收藏列表，optType=2表示收藏
    const res = await getOptListAPI({
      optType: 2,
      page: current.value,
      pageSize: 5,
    })

    // 处理分页逻辑
    if (current.value === 1) {
      // 第一页数据直接替换
      list.value = res.data.rows || []
    } else {
      // 后续页面数据追加
      list.value.push(...(res.data.rows || []))
    }

    // 更新加载状态 - 只有在请求成功时才增加页码
    current.value++
    if (current.value > res.data.pageTotal) {
      isFinished.value = true
    }
  } catch (error) {
    console.error('获取收藏列表失败:', error)
  } finally {
    isLoading.value = false
  }
}
getCollectList()
</script>

<template>
  <div class="collect-view">
    <!-- 顶部导航栏 -->
    <nav class="my-nav van-hairline--bottom">
      <h1 class="logo-text">我的收藏</h1>
    </nav>

    <!-- 收藏列表 -->
    <van-list
      v-model:loading="isLoading"
      :finished="isFinished"
      finished-text="没有更多了"
      class="article-list"
      @load="getCollectList"
      :immediate-check="false"
      offset="100"
    >
      <!-- 文章列表项 -->
      <ArticleItem v-for="item in list" :key="item.id" :article="item" />
    </van-list>
    <van-back-top right="15vw" bottom="10vh" />
  </div>
</template>

<style lang="scss" scoped>
.collect-view {
  margin-bottom: 50px;
  margin-top: 44px;
  .my-nav {
    height: 44px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo-text {
      font-size: 18px;
      font-weight: bold;
      color: #222;
      line-height: 44px;
      margin: 0;
    }
  }
}
</style>
